<template>
  <div class="hello">
    <!-- <input type="file" id="file" name="file" multiple="multiple" accept="image/*" capture="camera"/> -->
    <draggable v-model="list" @change="change">
      <transition-group>
        <img
          class="previewer-demo-img"
          v-for="(item, index) in list"
          :src="item.src"
          width="100"
          @click="show(index)"
          :key="index + 't'"
        />
      </transition-group>
    </draggable>
    <previewer ref="previewer" :list="list" :options="options"> </previewer>
    <div class="title">现场视频</div>
    <div class="upLoad">
      <label for="pop_video" id="labelr">
        <video id="videoId" controls width="100%"></video>
        <input
          style="display: none"
          id="pop_video"
          type="file"
          capture="camera"
          v-on:change="getVideo(event, '2')"
          name="fileTrans"
          ref="file"
          value=""
          multiple
        />
        <div class="inputVideo">上传视频</div>
      </label>
    </div>
    <!-- <div class="title">现场音频频</div>
 <div class="upLoad">
  <label for="pop_audio" id="labelr">
  <audio id="audioId" controls width="100%"></audio>
  <input style="display:none;" id="pop_audio" type="file" accept="audio/*" capture="camcorder" v-on:change="getAudio(event, '2')" name="fileTrans" ref="file" value="">
  <div class="inputAudio">上传音频</div>
  </label>
</div> -->
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'HelloWorld',
  components: {
    draggable,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      list: [
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg',
          w: 600,
          h: 400,
        },
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg',
          w: 600,
          h: 400,
        },
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg',
          w: 600,
          h: 400,
        },
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg',
          w: 600,
          h: 400,
        },
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg',
          w: 600,
          h: 400,
        },
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg',
          w: 600,
          h: 400,
        },
      ],
      options: {
        getThumbBoundsFn(index) {
          // find thumbnail element
          let thumbnail = document.querySelectorAll('.previewer-demo-img')[
            index
          ]
          // get window scroll Y
          let pageYScroll =
            window.pageYOffset || document.documentElement.scrollTop
          // optionally get horizontal scroll
          // get position of element relative to viewport
          let rect = thumbnail.getBoundingClientRect()
          // w = width
          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width }
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        },
      },
      // img: {
      //   url:
      //     'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn23%2F245%2Fw701h1144%2F20180517%2F6708-harvfhu9231586.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619537007&t=df5e55a5a7527d70f044f61a13a2e8b4',
      // },
    }
  },
  methods: {
    show(index) {
      // 显示特定index的图片，使用ref
      this.$refs.previewer.show(index)
    },
    change(e) {
      console.log('list', this.list)
      console.log('change', e)
    },
    // getVideo(ev, typer) {
    getVideo() {
      // let that = this
      //获取上传文件标签
      let filesId = document.getElementById('pop_video')
      console.log('filesId', filesId)
      //获取音频标签
      // let videoId = document.getElementById('videoId')
      // //把当前files[0]传给getFileURL方法， getFileURL方法对其做一处理
      // let url = this.getFileURL(filesId.files[0])
      // if (url) {
      //   //给video标签设置src
      //   videoId.src = url
      // }
      // let formData = new FormData()
      // formData.append('file', filesId.files[0])
      // // upload(this.token, formData).then((res) => {
      // //   console.log(res)
      // //   if (res.data.code === 0) {
      // //     this.videoURL = res.data.data.url
      // //   }
      // // })
      // console.log(url)
    },
    // getAudio(ev, typer) {
    getAudio() {
      // let that = this
      //获取上传文件标签
      let filesId = document.getElementById('pop_audio')
      //获取音频标签
      let audioId = document.getElementById('audioId')
      //把当前files[0]传给getFileURL方法， getFileURL方法对其做一处理
      let url = this.getFileURL(filesId.files[0])
      if (url) {
        //给video标签设置src
        audioId.src = url
      }
      let formData = new FormData()
      formData.append('file', filesId.files[0])
      // upload(this.token, formData).then((res) => {
      //   console.log(res)
      //   if (res.data.code === 0) {
      //     this.audioURL = res.data.data.url
      //   }
      // })
      console.log(url)
    },
    appSource() {
      const u = navigator.userAgent
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      if (isiOS) {
        return 'ios'
      } else {
        return 'andriod'
      }
    },
    getFileURL(file) {
      let getUrl = null
      if (window.createObjectURL != undefined) {
        //basic
        getUrl = window.createObjectURL(file)
      } else if (window.URL != undefined) {
        //window.URL 标准定义
        //mozilla(firefox)
        //获取一个http格式的url路径，这个时候就可以设置<img>中的显示
        getUrl = window.URL.createObjectURL(file)
      } else if (window.webkitURL != undefined) {
        //window.webkitURL是webkit的内核
        //webkit or chrome
        getUrl = window.webkitURL.createObjectURL(file)
      }
      return getUrl

      //video 标签的 duration属性，获取当前视频的长度
      // let duration = videoId.duration
      // if (Math.floor(duration) > 60) {
      // that.layer.msg('视频不能大于60秒')
      // }
    },
  },
  mounted() {
    var file = document.querySelector('input')
    if (getIos()) {
      file.removeAttribute('capture')
    }
    function getIos() {
      if (!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        return true
      } else {
        return false
      }
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
#inspect .upLoad {
  background-color: #fff;
  /* height: 1.5rem; */
  text-align: left;
  padding: 0.3rem;
}

#inspect .inputVideo {
  background-color: #00cc66;
  color: #fff;
  font-size: 0.32rem;
  width: 30%;
  height: 0.8rem;
  line-height: 0.8rem;
  border-radius: 0.4rem;
  text-align: center;
  margin: 0 auto;
}

#inspect .inputAudio {
  background-color: #5cadff;
  color: #fff;
  font-size: 0.32rem;
  width: 30%;
  height: 0.8rem;
  line-height: 0.8rem;
  border-radius: 0.4rem;
  text-align: center;
  margin: 0 auto;
}
</style>
